<template>
	<view class="address">
		
		<view class="lists">
			<view class="list-item" v-for="item in lists" :key="item.gid" @click="selectAddress(item)">
				<view class="label" v-if="item.is_default">默认地址</view>
				<view class="">
					<view class="area">{{item.province}}{{item.city}}{{item.area}}</view>
					<view class="detail">{{item.address}}</view>
					<view class="flex align-center" style="gap: rpx;">
						<view class="name">{{item.linkman}}</view>
						<view class="phone">{{item.phone}}</view>
					</view>
				</view>
				<view class="edit-btn">
					<view class="iconfont icon-edit-1" @click.stop="edit(item)"></view>
				</view>
			</view>
		</view>
		
		<view v-if="!loading && lists.length === 0" class="empty">暂无数据</view>
		
		<view class="footer-btns">
			<button class="cancel-btn flex-1" @click="addWxAddress">导入微信地址</button>
			<button class="confirm-btn flex-1" @click="goAddAddress">添加新地址</button>
		</view>
	</view>
</template>

<script>
	import AddressParse from 'address-parse';
	const checker = require("@/utils/checker.js");
	import provinceData from '@/libs/city-data/province.js';
	import cityData from '@/libs/city-data/city.js';
	import areaData from '@/libs/city-data/area.js';
	
	export default {
		data() {
			return {
				params: {
					limit: 10, // string  每页条数 可选 示例值: 10
					page: 1, // string  当前页数 可选 示例值: 1
					key: '', //  string  姓名/手机号/地址 可选
				},
				lists: [], // 地址列表
				loading: true, // 是否加载中
				more: true, // 是否还有更多
				
				type: ''
			};
		},
		onLoad(options) {
			this.type = options.type || ''
		},
		onShow(options) {
			this.params.page = 1
			this.getList()
		},
		onReachBottom() {
			if (this.more) {
				this.params.page++
				this.getList()
			}
		},
		onShareAppMessage(){},
		onShareTimeline() {},
		methods: {
			// 选择地址
			selectAddress(item) {
				if (this.type === 'select') {
					uni.$emit('changeAddress', item)
					uni.navigateBack()
				}
			},
			// 获取地址
			getList() {
				this.loading = true
				this.$api.addressListApi(this.params).then(res=> {
					if (this.params.page === 1) {
						this.lists = []
					}
					
					if (res.data.length === 0 || res.data.length < this.params.limit) {
						this.more = false
					} else {
						this.more = true
					}
					
					const oldList = [...this.lists]
					this.lists = oldList.concat(res.data.map(item=> ({...item, number: 0})))
				}).catch(err=> {
					console.log(err)
				}).finally(()=> {
					this.loading = false
				})
			},
			edit(item) {
				uni.navigateTo({
					url: '/pages/address/add/add?id='+item.gid
				})
			},
			goAddAddress() {
				uni.navigateTo({
					url: '/pages/address/add/add'
				})
			},
			// 导入微信地址
			addWxAddress() {
				uni.chooseAddress({
					success: (res)=>{
						const value = this.getAreaCode(res)
						const params = {
							linkman: res.userName, // string 姓名 必需
							phone: res.telNumber, // string  手机号 必需
							province: res.provinceName, //string 省 必需
							provinceCode: value.provinceCode || '', // string 可选
							city: res.cityName, // string 市 必需
							cityCode: value.cityCode || '', // string  必需
							area: res.countyName, //string 区 必需
							areaCode: value.areaCode || '', // string 必需
							address: res.detailInfo, // string  详细地址 必需
							latitude: '', // string  必需 纬度，（六位小数，如24.412750）
							longitude: '', // string  必需 经度，（六位小数，如111.581652）
							is_default: 0, // integer  必需 设为默认：0否；1是 示例值: 1
						}
						console.log('params', params)
						this.$api.addressCreateApi(params).then(res=> {
							uni.showToast({
								mask: true,
								title: '添加成功'
							})
							// setTimeout(()=> {
							// 	uni.navigateBack()
							// }, 1200)
						}).catch(err=> {
							console.log('err', err);
						})
					},
					fail: (err) => {
						console.log('err', err);
					}
				})
			},
			getAreaCode(res) {
				const provinceIndex = provinceData.findIndex(item=> item.label === res.provinceName)
				const cityIndex = cityData[provinceIndex].findIndex(item=> item.label === res.cityName)
				const areaIndex = areaData[provinceIndex][cityIndex].findIndex(item=> item.label === res.countyName)
				const params = {
					provinceCode: '',
					cityCode: '',
					areaCode: '',
				}
				
				if (provinceIndex !== -1 && provinceData[provinceIndex]) {
					params.provinceCode = provinceData[provinceIndex].value
					
					// console.log('provinceCode', params.provinceCode);
					if (cityIndex !== -1 && cityData[provinceIndex][cityIndex]) {
						params.cityCode = cityData[provinceIndex][cityIndex].value
						// console.log('cityCode', params.cityCode);
						
						if (areaIndex !== -1 && areaData[provinceIndex][cityIndex][areaIndex]) {
							params.areaCode = areaData[provinceIndex][cityIndex][areaIndex].value
							// console.log('areaCode', params.areaCode);
						}
					}
				}
				
				return params
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		padding: 24rpx 32rpx;
		
		.lists {
			
			
			.list-item {
				position: relative;
				padding: 32rpx;
				overflow: hidden;
				margin-bottom: 32rpx;
				border-radius: 26rpx;
				padding-right: 100rpx;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.02);
				
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			.label {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 9;
				border-radius: 6rpx;
				padding: 4rpx 16rpx;
				background-color: #E3F9E9;
				
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: center;
				color: #2BA471;
			}
			
			.area {
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: 400;
				line-height: 18.2px;
				text-align: left;
				color: rgba(0, 0, 0, 0.7);
				padding-bottom: 14rpx;
			}
			
			.detail {
				font-size: 34rpx;
				font-weight: 400;
				line-height: 46rpx;
				text-align: left;
				color: #000000;
				padding-bottom: 14rpx;
			}
			
			.name {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				text-align: left;
				color: #000000;
			}
			
			.phone {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				text-align: left;
				color: #000000;
			}
			
			.icon-edit-1 {
				color: #000000;
				font-size: 48rpx;
				position: relative;
				z-index: 9;
				
				&::after {
					position: absolute;
					content: '';
					top: 14rpx;
					left: 4rpx;
					z-index: -1;
					width: 70%;
					height: 8rpx;
					transform: rotate(-45deg);
					background-color: #A5A4B4;
				}
			}
			
			.edit-btn {
				position: absolute;
				top: 50%;
				right: 32rpx;
				width: 52rpx;
				height: 92rpx;
				transform: translateY(-50%);
				
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.footer-btns {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 999;
			padding: 22rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 22rpx rgba(0, 0, 0, 0.05);
			padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20rpx;
			
			.cancel {
				color: #000000;
			}
		}
	}
</style>
